<template>
  <div class="banlance">
    <div class="card-search">
      <el-form
        size="small"
        :inline="true"
        class="demo-form-inline"
        label-height="80px"
      >
        <el-form-item label="产品类型">
          <el-select
            v-model="mold"
            clearable
            placeholder="请选择产品类型"
            style="width: 155px"
          >
            <el-option label="电极" value="电极"></el-option>
            <el-option label="坩埚" value="坩埚"></el-option>
            <el-option label="接头" value="接头"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工艺" prop="name">
          <el-select
            filterable
            clearable
            v-model="Craft"
            placeholder="请选择工艺"
            style="width: 155px"
          >
            <el-option
              v-for="(item, index) in form.CraftData"
              :key="index"
              :label="item"
              :value="item"
              :index="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="型号" prop="name">
          <el-select
            style="width: 155px"
            filterable
            clearable
            v-model="createform.WhatModel"
            placeholder="请选择型号"
          >
            <el-option
              v-for="(item, index) in form.WhatModelData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直径" prop="name">
          <el-select
            style="width: 155px"
            filterable
            clearable
            v-model="createform.Diameter"
            placeholder="请选择直径"
          >
            <el-option
              v-for="(item, index) in form.DiameterData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="正次品" prop="GoodOrBad">
          <el-select
            filterable
            clearable
            v-model="createform.GoodOrBad"
            placeholder="请选择正次品"
            style="width: 155px"
          >
            <el-option label="正品" value="正品"></el-option>
            <el-option label="次品" value="次品"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属" prop="affiliation">
          <el-select
            filterable
            clearable
            v-model="createform.affiliation"
            placeholder="请选择归属"
            style="width: 175px"
          >
            <el-option label="本厂" value="本厂"></el-option>
            <el-option label="客户" value="客户"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button icon="el-icon-search" type="primary" @click="getData"
            >查询</el-button
          >
          <el-button
            icon="el-icon-refresh"
            type="primary"
            @click="(createform = {}), (Craft = '')"
            >重置</el-button
          >
          <el-button
            icon="el-icon-plus"
            type="primary"
            @click="(dialogVisibleAdd = true), (name = '新增库存')"
            >新增库存项目</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="card-table">
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tableDataList"
          :index="index"
          :key="item.id"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        >
        </el-table-column>
        <el-table-column align="center" label="工单查询" width="230">
          <template slot-scope="{ row }">
            <el-button
              style="padding: 10px"
              type="primary"
              plain
              @click="inOutbound(row, '出库')"
              >出库工单</el-button
            >
            <el-button
              style="padding: 10px"
              type="primary"
              plain
              @click="inOutbound(row, '入库')"
              >入库工单</el-button
            >
          </template>
        </el-table-column>
        <el-table-column align="center" label="出库/入库/流转" width="230">
          <template slot-scope="{ row }">
            <el-button
              icon="el-icon-document-remove"
              style="padding: 10px"
              type="primary"
              @click="
                (churuDialogVisible = true), (name = '出库'), (rows = row)
              "
              >出库</el-button
            >
            <el-button
              icon="el-icon-document-add"
              style="padding: 10px"
              type="primary"
              @click="
                (churuDialogVisible = true), (name = '入库'), (rows = row)
              "
              >入库</el-button
            >
            <el-button
              icon="el-icon-document-copy"
              style="padding: 10px"
              type="primary"
              @click="(dialogVisibles = true), (name = '流转'), (rows = row)"
              >流转</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagin" v-if="total > pageSize">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <liuzhuan
      :dialogVisible="dialogVisibles"
      :names="name"
      :rowa="rows"
      @dialogQuxiao="change"
    ></liuzhuan>
    <addKucun
      :dialogVisible="dialogVisibleAdd"
      :names="name"
      @dialogQuxiao="change"
    ></addKucun>
    <churu
      :dialogVisible="churuDialogVisible"
      :names="name"
      :rowa="rows"
      @dialogQuxiao="change"
    ></churu>
    <inOutBound
      :dialogVisible="dialogVisibleChuRu"
      :type="inOuttype"
      :row="inOutrow"
      @dialogQuxiao="change"
    ></inOutBound>
  </div>
</template>

<script>
import liuzhuan from "./add/liuzhuan.vue";
import addKucun from "./add/add.vue";
import churu from "./add/churu.vue";
import inOutBound from "./inOutBoundWork/index.vue";
import { NewLIUZHUANget2, CraftgetAll } from "@/api/stock/banlance3.js";
import { WhatModelgetAll } from "@/api/stock/whatmodel.js";
import { DiametergetAll } from "@/api/stock/diameter.js";
export default {
  components: { liuzhuan, churu, addKucun, inOutBound },
  data() {
    return {
      //分页
      total: 0,
      currPage: 1,
      pageSize: 10,
      //表格
      tableData: [],
      tableDataList: [
        { id: 13, prop: "affiliation", label: "归属", width: "width" },
        { id: 2, prop: "craft", label: "工艺", width: "width" },
        {
          id: 1,
          prop: "controller",
          label: "所属库管",
          width: "width",
        },
        { id: 3, prop: "diameter", label: "直径", width: "100" },
        { id: 4, prop: "length", label: "长度", width: "100" },
        { id: 5, prop: "mold", label: "产品类型", width: "width" },
        { id: 6, prop: "number", label: "数量", width: "100" },
        { id: 7, prop: "weight", label: "总重", width: "100" },
        { id: 9, prop: "goodOrBad", label: "正次品", width: "width" },
        { id: 14, prop: "status", label: "状态", width: "width" },
        { id: 10, prop: "whatModel", label: "型号", width: "width" },
      ],
      //表单
      form: {
        DiameterData: [],
        CraftData: [],
        WhatModelData: [],
      },
      mold: "",
      Craft: "",
      createform: {},
      dialogVisibles: false,
      churuDialogVisible: false,
      dialogVisibleAdd: false,
      name: "",
      rows: 1,
      //出入库按钮
      inOutrow: 1,
      inOuttype: "",
      dialogVisibleChuRu: false,
      //出入库按钮
    };
  },
  async created() {
    this.getData();
    //获取工艺和所属库管
    CraftgetAll().then((res) => {
      const pageData = res.data.data.pageData;
      pageData.forEach((element) => {
        this.form.CraftData.push(element.dates);
      });
    });
    //获取型号
    WhatModelgetAll().then((res) => {
      const pageData = res.data.data.pageData;
      pageData.forEach((element) => {
        this.form.WhatModelData.push(element);
      });
    });
    //获取直径
    DiametergetAll().then((res) => {
      const pageData = res.data.data.pageData;
      pageData.forEach((element) => {
        this.form.DiameterData.push(element);
      });
    });
  },
  watch: {},
  methods: {
    change() {
      this.dialogVisibles = false;
      this.churuDialogVisible = false;
      this.dialogVisibleAdd = false;
      this.dialogVisibleChuRu = false;
      this.rows = 1;
      this.inOutrow = 1;
      this.getData();
    },
    churuku() {},
    async getData() {
      const params = {
        pageSize: this.pageSize,
        currPage: this.currPage,
        craft: this.Craft,
        diameter: this.createform.Diameter,
        whatModel: this.createform.WhatModel,
        goodOrBad: this.createform.GoodOrBad,
        affiliation: this.createform.affiliation,
        mold: this.mold,
      };
      const { data } = await NewLIUZHUANget2(params);
      this.total = data.data.total;
      this.tableData = data.data.pageData;
    },
    //出入库按钮
    inOutbound(row, type) {
      console.log(row, type);
      this.inOutrow = row;
      this.inOuttype = type;
      this.dialogVisibleChuRu = true;
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.getData();
    },
  },
};
</script>

<style  scoped>
.banlance {
  .pagin {
    display: flex;
    justify-content: right;
    padding: 12px 12px 0 0;
  }
  .pagin  .el-pager .active {
    background-color: $primary !important;
  }
}
</style>
